<template>
  <!--库存信息-->

  <el-card class="w-9/12 h-full mr-0.5 px-5 py-5 cart-box">
    <template #header>
      <div class="card-header flex items-center color2">
        <i class="iconfont icon-huowu" style="font-size: 24px;"/>
        <span class="font-semibold text-xl inline-block ml-2">{{$t('wms.InventoryInfo')}}</span>
      </div>
      <div class="divider"></div>
    </template>
    <div class="w-full h-2/5 box-inventroy">
      <div class="p-4  w-1/3 h-full  item-box" v-for="(item,index) in inventroyData1" :key="index">
        <inventroyItem :item="item" :index="index"/>
      </div>

    </div>
    <div class="w-full h-2/5 box-inventroy">
      <div class="p-4 w-1/3 h-full rounded-e-lg item-box" v-for="(item,index) in inventroyData2" :key="index">
        <inventroyItem :item="item" :index="index"/>
      </div>

    </div>

  </el-card>

</template>

<script setup>
import '@/assets/font/iconfont.css'

import inventroyItem from './inventroyItem.vue'
import { getInventroy } from '@/api/warehouse/warehouseApi'
import { reactive } from 'vue'
import useI18n from '@/hooks/language'

const { t } = useI18n()
const inventroyData1 = reactive([{
  title: t('common.TotalPVCInventory'),
  num: 0,
  bgc: 'bgc1',
  unit:' Pcs',
  color: '#afcaf4',
  color2: '#116ee3',
  iconfont: 'icon-ico-book'
}, {
  title: t('common.TotalInventory'),
  num: 0,
  unit:' Pcs',
  bgc: 'bgc2',
  color: '#b4eaf6',
  color2: '#5f909c',
  iconfont: 'icon-ico-timerange'

}, {
  title: t('common.totalOrder'),
  num: 0,
  unit:' Pcs',
  bgc: 'bgc3',
  color: '#ffd3ad',
  color2: '#ff8c31',
  iconfont: 'icon-zichanbaobiao'
}])

const inventroyData2 = reactive([{
  title: t('common.TotalLVTInventory'),
  num: 0,
  unit:' Pcs',
  bgc: 'bgc4',
  color: '#afcaf4',
  color2: '#116ee3',
  iconfont: 'icon-fenzuzhuzhuangtu'
}, {
  title: t('common.laminatedBoards'),
  num: 0,
  unit:' Pcs',
  bgc: 'bgc5',
  color: '#b4eaf6',
  color2: '#5f909c',
  iconfont: 'icon-zhibiaofenbutongji'
}, {
  title: t('common.OrderQuantity'),
  num: 0,
  bgc: 'bgc6',
  color: '#ffd3ad',
  color2: '#ff8c31',
  iconfont: 'icon-donghuozuoye'

}])


// 获取库存信息数据
const getInventroyInfo =async () =>{
  let obj = {
    [t('common.TotalPVCInventory')]: "pvcStockQty",
    [t('common.TotalLVTInventory')]: "lvtStockQty",
    [t('common.laminatedBoards')]: "thStockQty",
    [t('common.TotalInventory')]: "fgStockQty",
    [t('common.totalOrder')]: "salesQty",
    [t('common.OrderQuantity')]: "salesNumber",
  };

  try {
    //pvcStockQty   PVC库存总数
    //ivtStockaty   LVT库存总数
    //thstockaty   TH库存总数
    //fgstockaty   成品库存总数
    //salesQty     订单需求总数
    //salesNumber  销售订单数量
  let res = await getInventroy()
    let info = res.data
    // console.log(info,'-----')
    // 更新 inventroyData2 中的 num 属性
    inventroyData1.forEach(item => {
      const key = obj[item.title]; // 根据 title 获取对应的 key
      if (key && info[key] !== undefined) { // 检查 key 是否存在并且 info 中有对应的值
        item.num = info[key]; // 更新 num 属性
      }
    });
    inventroyData2.forEach(item => {
      const key = obj[item.title]; // 根据 title 获取对应的 key
      if (key && info[key] !== undefined) { // 检查 key 是否存在并且 info 中有对应的值
        item.num = info[key]; // 更新 num 属性
      }
    });

  } catch (error) {
    console.log(error)
  }

}

getInventroyInfo()
</script>


<style scoped lang="scss">
.divider {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 8px;
}

.box-inventroy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;

  .item-box {
    // margin: 5px;
  }
}

.cart-box {
  margin-right: 20px;
}

</style>
